<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" class="container-fluid"></div>
        <script>
            var chart;
            $(function () {
                // Set up the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        options3d: {
                            enabled: true,
                            alpha: 15,
                            beta: 25,
                            depth: 100,
                            viewDistance: 25
                        }
                    },
                    title: {
                        text: '抢一抢交互性3D柱状图'
                    },
                    subtitle: {
                        text: '塔米智能科技（北京）有限公司研发部测试'
                    },
                    plotOptions: {
                        column: {
                            depth: 100
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        type:'category',
                        categories: ['PH 美好', 'PL 平和', 'NL 欠佳', 'NH 负面']
                    },
                    yAxis: {
                        min:0,
                        title: {
                            text: '投票数',
                            align: 'high',
                            x:-20
                        }
                    },
                    series: [{
                        name:'抢一抢',
                        // data: [50,20,38,12,15]
                        data:[
                            {'color':'#ED5555','y': 11},
							{'color':'#A0D468','y': 22},
							{'color':'#5D9CEC','y': 43},
                            {'color':'#808080','y': 12}
                        ]
                    }]
                });
            });
            Connect();
            var socket;
            function Connect(){
                try{
                    socket = new WebSocket('ws://192.168.100.157:9000/screenweb');
                }catch(e){
                    alert('error new WebSocket');
                    return;
                }
                socket.onopen = sOpen;
                socket.onerror = sError;
                socket.onmessage = sMessage;
                socket.onclose = sClose;
            }
            function sOpen(){
                var msgbody = '服务器连接成功';
                console.log(msgbody);
            }
            function sError(){
                var msgbody = '服务器异常Error=' + e + '请检查';
                console.log(msgbody);
            }
            function sMessage(msg){
                // alert('server says:' + msg.data);
                //由JSON字符串转换为JSON对象
                // vmOne.sites = JSON.parse(msg.data);
                parseMessageJson(msg.data);
            }
            function sClose(e){
                var msgbody = '服务器连接关闭ErrorCode=' + e.code;
                console.log(msgbody);
            }
            function sSend(msg){
                socket.send(msg);
            }
            function parseMessageJson(data){
                //由JSON字符串转换为JSON对象
                console.log(data);
                var msg = JSON.parse(data);
                var strcategories = {};
                var categories = [];
                var strseries = [];
                var strseriesEld = {};
                var strseriesEldData = [];
                for(var i=0; i<msg.length; i++) {
                    categories[i] = msg[i].name;
                    if(0 == i){
                        strseriesEldData[i] = {'color':'#ED5555','y': msg[i].count};
                    }else if(1 == i){
                        strseriesEldData[i] = {'color':'#A0D468','y': msg[i].count};
                    }else if(2 == i){
                        strseriesEldData[i] = {'color':'#5D9CEC','y': msg[i].count};
                    }else if(3 == i){
                        strseriesEldData[i] = {'color':'#808080','y': msg[i].count};
                    }
                }
                strcategories["categories"] = categories;
                strseriesEld["name"] = "抢一抢";
                strseriesEld["data"] = strseriesEldData;
                strseries[0] = strseriesEld;
                //
                console.log(JSON.stringify(strseries));
                //                
                chart.update({
                    series: strseries,
                    xAxis: strcategories
                });
            }
        </script>    
    </body>    
</html>
    